﻿{extend name="public:base" /}

{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
<link href="__ADMIN__/css/style.css" rel="stylesheet">
<style>
    #box {
        display: flex;
        justify-content: start;
    }

    h1 {
        text-align: center;
        color: #4a4a4a;
    }

    .container {
        margin: 0 auto;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
        height: 70vh;
        overflow-y: scroll;
    }

    .container:last-child {
        margin-left: 20px;
    }

    .question {
        margin-bottom: 20px;
    }

    .question-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
        color: #333;
    }

    /* 单选题和多选题样式 */
    .options {
        list-style: none;
        padding: 0;
    }

    .options li {
        margin-bottom: 8px;
    }

    /* 填空题样式 */
    .input-readonly {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border-radius: 4px;
        border: 1px solid #ddd;
        margin-top: 5px;
        margin-bottom: 10px;
        background-color: #f9f9f9;
        color: #666;
        cursor: not-allowed;
    }

    .input {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border-radius: 4px;
        border: 1px solid #ddd;
        color: #666;
    }

    /* 问答题样式 */
    textarea {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border-radius: 4px;
        border: 1px solid #ddd;
        resize: vertical;
        min-height: 100px;
        background-color: #f9f9f9;
        color: #666;
        cursor: not-allowed;
    }

    /* 提交按钮样式 */
    button {
        background-color: #3a7bd5;
        color: white;
        padding: 8px 30px;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    button:hover {
        background-color: #2a5ba1;
    }

    .input-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .input-box .del-rule {
        margin-left: 20px;
        background: red;
        color: #fff;
        border: none;
        padding: 11px 10px;
        border-radius: 4px;
        cursor: pointer;
        width: 100px;
        text-align: center;
    }

    /* 响应式设计 */
    @media (max-width: 600px) {
        .container {
            padding: 10px;
        }

        .question-title {
            font-size: 16px;
        }

        button {
            width: 100%;
        }
    }

    .prompt {
        font-family: 'Microsoft YaHei', sans-serif; /* 使用微软雅黑或其他清晰的字体 */
        font-size: 16px; /* 设置合适的字体大小 */
        line-height: 1.8; /* 行高，让文字更易阅读 */
        color: #333; /* 深灰色字体，更柔和 */
        padding: 20px; /* 内边距，给文字内容留白 */
        background-color: #f9f9f9; /* 浅灰背景色，提升可读性 */
        border-left: 4px solid #3498db; /* 左边增加一条蓝色边框 */
        border-radius: 8px; /* 圆角边框让整体看起来更优雅 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影，增加层次感 */
        margin: 20px 0; /* 上下留白 */
    }

    /* 样式：问卷切换框 */
    .index-box {
        display: flex; /* 使用 flex 布局 */
        align-items: center; /* 垂直居中 */
        justify-content: space-between; /* 两侧图标均匀分布 */
        background-color: #f9f9f9; /* 背景颜色 */
        padding: 20px; /* 内边距 */
        border-radius: 8px; /* 圆角边框 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
        max-width: 35%; /* 限制最大宽度 */
        margin: 0 auto 20px; /* 居中显示 */
    }

    .index-box img {
        width: 24px; /* 图标大小 */
        height: 24px;
        cursor: pointer; /* 鼠标悬停时显示手型 */
        transition: transform 0.3s ease; /* 增加过渡效果 */
    }

    .index-box img:hover {
        transform: scale(1.1); /* 鼠标悬停时稍微放大 */
    }

    .index-box .text {
        font-size: 18px; /* 文字大小 */
        font-weight: bold; /* 加粗 */
        color: #333; /* 文字颜色 */
        text-align: center; /* 居中对齐 */
        flex-grow: 1; /* 占据剩余空间 */
        margin: 0 15px; /* 左右边距 */
    }

    .active {
        color: #1ab394;
    }

</style>{/block}{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="index-box">
        <img src="/static/admin/img/prev.png" onclick="prev()" alt="上一题">
        <div class="text">第{$index + 1}套问卷</div>
        <img src="/static/admin/img/next.png" onclick="next()" alt="下一题">
    </div>
    <div id="box">
        <div class="container" style="width: 50%">
            <div class="question">
                <div class="question-title">答案生成规则</div>
            </div>
            <div class="prompt">
                {volist name="user_rule" id="vo" key="key"}
                {if count($vo) > 0}
                第{$key}题：
                {volist name="vo" id="v" key="k"}
                <span style="margin-right: 20px">选项{$k}：{$v}%</span>
                {/volist}
                <br>
                {/if}
                {/volist}
            </div>

        </div>

        <div class="container" style="width:50%">
            <h1>{$info.title}</h1>

            <div class="question-box">

            </div>
        </div>
    </div>
</div>

{/block}

{block name='js'}
<script src="/static/layui/layui.js"></script>

<script>
    var index = `{$index}` ? parseInt(`{$index}`) : 0;
    var id = `{$id}` ? parseInt(`{$id}`) : 0;
    var count = `{$info.answer_count}` ? parseInt(`{$info.answer_count}`) : 0;

    function prev() {
        var prev_index = index - 1;
        if (index == 0) {
            layer.msg('已经是第一套问卷了');
        } else {
            index = prev_index;
            renderQuestion()
        }
    }

    function next() {
        var next_index = index + 1;
        if (next_index >= count) {
            layer.msg('已经是最后一套问卷了');
        } else {
            index = next_index;
            renderQuestion()
        }
    }

    var question = `{$question}` ? JSON.parse(`{$question}`) : [];
    var ai_answer = `{$ai_answer}` ? JSON.parse(`{$ai_answer}`) : [];
    renderQuestion();

    function renderQuestion() {
        $('.text').html('第' + (index + 1) + '套问卷');

        var html = '';
        if (question.length > 0) {
            question.forEach((val, key) => {
                var {question, answers} = val;
                if (answers.length > 0) {
                    // 选择题
                    var answers_text = '';
                    answers.forEach((v, k) => {
                        var active = isEqualOrInArray(k + 1, ai_answer[index][key]) ? 'active' : '';
                        answers_text += `<li class="${active}">${v}</li>`
                    })
                    html += `<div class="question">
                                <div class="question-title">${val.question}</div>
                                <ul class="options">
                                ${answers_text}
                                </ul>
                            </div>`
                } else {
                    // 问答题
                    html += `<div class="question">
                                <div class="question-title">${val.question}</div>
                                <input type="text" class="input-readonly" value="${ai_answer[index][key]}" readonly="">
                            </div>`;
                }
            })
        }
        $('.question-box').html(html);
    }

    function isEqualOrInArray(fixedNum, numOrArray) {
        if (typeof numOrArray === 'number') {
            // 如果 numOrArray 是数字，直接判断是否相等
            return fixedNum === numOrArray;
        } else if (Array.isArray(numOrArray)) {
            // 如果 numOrArray 是数组，判断 fixedNum 是否在数组中
            return numOrArray.includes(fixedNum);
        }
        return false; // 如果 numOrArray 既不是数字也不是数组，返回 false
    }

</script>{/block}
